<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "bottom"
})
</script>

<template>
  <div id="MainFooter" class="MainFooter">
    <div class="main-footer">
      <div class="wrapper">
        <div class="link-box">
          <div class="link-item-left">
            <span class="link-item-head">petStore</span>
            <div class="link-item-panel">
              <a target="_blank" href="#">关于我们</a>
              <a target="_blank" href="#">联系我们</a>
              <a target="_blank" href="#">用户协议</a>
              <a target="_blank" href="#">加入我们</a>
              <a target="_blank" href="#">友情链接</a>
              <a target="_blank" href="#">隐私协议</a>
              <a target="_blank" href="#">petStore经营认证</a>
            </div>
          </div>
          <div class="link-item-center">
            <span class="link-item-head">传送门</span>
            <div class="link-item-panel">
              <a target="_blank" href="#">中南大学官网</a>
              <a target="_blank" href="#">中南大学信网中心</a>
              <a target="_blank" href="#">中南大学计算机学院</a>
              <a target="_blank" href="#">广告合作</a>
              <a target="_blank" href="#">帮助中心</a>
              <a target="_blank" href="#">侵权申诉</a>
              <a target="_blank" href="#">社区中心</a>
            </div>
          </div>
          <div class="link-item-right">
            <div class="pic_wrapper">
              <a target="_blank" href="#" class="pic_wrapper_check">
                <span class="icon">
                  <svg x="1687248806138" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="8191" width="200" height="200">
                    <path d="M924.970667 776.618667l-269.44-301.44 266.538666-233.173334 16.597334-14.762666v564.437333l-13.696-15.061333zM882.773333 205.44l16.554667-13.44H125.738667l15.445333 13.44L512 529.92l370.816-324.48z m-353.28 379.989333a26.666667 26.666667 0 0 1-35.072 0L408.576 510.293333l-272.810667 305.28-15.061333 16.426667h782.506667l-14.933334-16.426667-272.896-305.28-85.845333 75.136zM85.333333 298.666667V792.277333l283.093334-317.141333L85.333333 242.005333V298.666667z" fill="#0095FF" p-id="8192"></path>
                  </svg>
                </span>
                <p class="pic_wrapper_title">违规举报</p>
              </a>
            </div>
            <div class="pic_wrapper">
              <a target="_blank" href="#" class="pic_wrapper_love">
                <span class="icon">
                  <svg x="1687248675879" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="6706" width="200" height="200">
                    <path d="M655.449 553.29h-3.355a112.394 112.394 0 0 1-80.988-37.532L447.258 377.489a35.548 35.548 0 0 1-8.098-34.766 34.567 34.567 0 0 1 25.875-22.715 34.173 34.173 0 0 1 33.383 11.262l108.246 120.492 21.332 26.271c13.359 15.195 36.043 17.84 52.543 6.121 16.59-11.484 22.512-33.246 14.023-51.551a41.561 41.561 0 0 1-2.172-4.152l-0.988-2.567-1.582-1.972-1.977-2.371-1.379-1.383-39.507-43.458-189.43-205.824c-18.172-15.407-160.589-127.407-310.711-24.098C-13.773 258.184 34.227 443.071 95.855 529.391l23.11 31.802c52.937 71.108 210.566 228.737 309.527 325.723 45.485 44.718 118.207 45.418 164.543 1.582L404.395 687.61c-13.231-14.146-12.704-36.277 1.183-49.777a34.36 34.36 0 0 1 24.742-9.672 34.383 34.383 0 0 1 24.246 10.854l188.442 200.492c19.754-19.75 41.285-41.085 62.617-62.613L522.516 582.13c-11.676-14.293-10.473-35.145 2.766-48 13.234-12.743 34.172-12.743 47.406 0L754.61 727.508c19.754-21.531 40.891-42.468 59.258-62.613l-113.379-120.69a111.196 111.196 0 0 1-45.234 9.479l0.194-0.394z m0 0" fill="#1D92FF" p-id="6707"></path><path d="M876.917 146.508c-160.59-111.211-312.688 25.875-312.688 25.875l-5.133 5.531 182.516 197.528c30.73 33.515 35.488 83.351 11.652 122.074L861.51 612.87c17.582-19.754 32-37.53 42.668-51.75a1920.416 1920.416 0 0 0 23.309-31.604c62.219-85.728 110.023-271.406-50.57-382.613v-0.395z" fill="#FF9E12" p-id="6708"></path>
                  </svg>
                </span>
                <p class="pic_wrapper_title">公益捐助</p>
              </a>
            </div>
            <div class="pic_wrapper">
              <a target="_blank" href="#" class="pic_wrapper_wb">
                <span class="icon">
                  <svg x="1687248624231" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="5287" width="200" height="200">
                    <path d="M851.4 590.193c-22.196-66.233-90.385-90.422-105.912-91.863-15.523-1.442-29.593-9.94-19.295-27.505 10.302-17.566 29.304-68.684-7.248-104.681-36.564-36.14-116.512-22.462-173.094 0.866-56.434 23.327-53.39 7.055-51.65-8.925 1.89-16.848 32.355-111.02-60.791-122.395C311.395 220.86 154.85 370.754 99.572 457.15 16 587.607 29.208 675.873 29.208 675.873h0.58c10.009 121.819 190.787 218.869 412.328 218.869 190.5 0 350.961-71.853 398.402-169.478 0 0 0.143-0.433 0.575-1.156 4.938-10.506 8.71-21.168 11.035-32.254 6.668-26.205 11.755-64.215-0.728-101.66z m-436.7 251.27c-157.71 0-285.674-84.095-285.674-187.768 0-103.671 127.82-187.76 285.674-187.76 157.705 0 285.673 84.089 285.673 187.76 0 103.815-127.968 187.768-285.673 187.768z" fill="#E71F19" p-id="5288"></path><path d="M803.096 425.327c2.896 1.298 5.945 1.869 8.994 1.869 8.993 0 17.7-5.328 21.323-14.112 5.95-13.964 8.993-28.793 8.993-44.205 0-62.488-51.208-113.321-114.181-113.321-15.379 0-30.32 3.022-44.396 8.926-11.755 4.896-17.263 18.432-12.335 30.24 4.933 11.662 18.572 17.134 30.465 12.238 8.419-3.46 17.268-5.33 26.41-5.33 37.431 0 67.752 30.241 67.752 67.247 0 9.068-1.735 17.857-5.369 26.202a22.832 22.832 0 0 0 12.335 30.236l0.01 0.01z" fill="#F5AA15" p-id="5289"></path><path d="M726.922 114.157c-25.969 0-51.65 3.744-76.315 10.942-18.423 5.472-28.868 24.622-23.5 42.91 5.509 18.29 24.804 28.657 43.237 23.329a201.888 201.888 0 0 1 56.578-8.064c109.253 0 198.189 88.271 198.189 196.696 0 19.436-2.905 38.729-8.419 57.16-5.508 18.289 4.79 37.588 23.212 43.053 3.342 1.014 6.817 1.442 10.159 1.442 14.943 0 28.725-9.648 33.37-24.48 7.547-24.906 11.462-50.826 11.462-77.175-0.143-146.588-120.278-265.813-267.973-265.813z" fill="#F5AA15" p-id="5290"></path><path d="M388.294 534.47c-84.151 0-152.34 59.178-152.34 132.334 0 73.141 68.189 132.328 152.34 132.328 84.148 0 152.337-59.182 152.337-132.328 0-73.15-68.19-132.334-152.337-132.334zM338.53 752.763c-29.454 0-53.39-23.755-53.39-52.987 0-29.228 23.941-52.989 53.39-52.989 29.453 0 53.39 23.76 53.39 52.989 0 29.227-23.937 52.987-53.39 52.987z m99.82-95.465c-6.382 11.086-19.296 15.696-28.726 10.219-9.43-5.323-11.75-18.717-5.37-29.803 6.386-11.09 19.297-15.7 28.725-10.224 9.43 5.472 11.755 18.864 5.37 29.808z" fill="#040000" p-id="5291"></path>
                  </svg>
                </span>
                <p class="pic_wrapper_title">官方微博</p>
              </a>
            </div>
            <div class="pic_wrapper">
              <a target="_blank" href="#" class="pic_wrapper_wechat">
                <span class="icon">
                  <svg x="1687248566422" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="3648" width="200" height="200">
                    <path d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z" fill="#28C445" p-id="3649"></path><path d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z" fill="#28C445" p-id="3650"></path>
                  </svg>
                </span>
                <p class="pic_wrapper_title">官方微信</p>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .main-footer{
    z-index: 1;
    position: relative;
    padding: 30px 0;
    min-width: 999px;
    background-color: #efefef;
    font-size: 12px;
  }
  .main-footer a{
    text-decoration: none;
    background-color: transparent;
  }
  .main-footer p{
    margin-top: 10px;
    height: 20px;
    color: #18191c;
    transition: color .2s;
  }
  .main-footer .wrapper{
    margin: 0 15px;
    min-width: 1000px;
  }
  .main-footer .wrapper .link-box{
    margin: 0 30px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
  }
  .link-item-left{
    width: 350px;
  }
  .link-item-center{
    width: 450px;
  }
  .link-item-right{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 0;
    padding-right: 0;
    border-right: none;
    flex-shrink: 0;
  }
  .link-item-head{
    display: block;
    margin-bottom: 10px;
    height: 20px;
    font-size: 16px;
    color: rgb(148 153 160);
  }
  .link-item-panel>a{
    display: inline-block;
    margin-right: 12px;
    margin-bottom: 4px;
    line-height: 24px;
    color: #18191c;
  }
  .pic_wrapper{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 22px;
  }
  .main-footer .pic_wrapper .icon{
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
  .main-footer svg{
    color: inherit;
  }
  @media (max-width: 1100px) {
    .main-footer .pic_wrapper{
      margin: 0 8px;
    }
  }
</style>